<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>事件</title>
		<style type="text/css">
			input{font-size:26px;margin-top: 20px;}
			body{background-image: url(images/grassland.png);}
			#mytank{position: absolute;left:10px;top:100px}
		</style>
	</head>
	<body>
		<!-- 179000611王少琦 -->
		<input type="button" value="按钮一" onclick="button1()"/>
		<input type="button" value="按钮二" id="button2"/>
		<input type="button" value="按钮三" id="button3"/>
		<hr />
		<img id="mytank" src="images/right.png"/>
		<script type="text/javascript">
			var mytank = document.getElementById('mytank');
			window.addEventListener(
				'keydown',
				function(e){
					console.log(e.keyCode);
					switch (e.keyCode) {
						case 37: //左
							mytank.setAttribute('src', "images/left.png")
							mytank.style.left = (mytank.offsetLeft - 10) + 'px';
							break;
						case 38: //上
							mytank.setAttribute('src', "images/up.png")
							mytank.style.top = (mytank.offsetTop - 10) + 'px';
							break;
						case 39: //右
							mytank.setAttribute('src', "images/right.png")
							mytank.style.left = (mytank.offsetLeft + 10) + 'px';
							break;
						case 40: //下
							mytank.setAttribute('src', "images/down.png")
							mytank.style.top = (mytank.offsetTop + 10) + 'px';
							break;
						default:
							return;
					}
				});	
			//按钮一点击事件
			function button1(){
				alert("javascript事件测试一");
			}
			//按钮二双击事件
			var button2 = document.getElementById("button2");
			button2.ondblclick = function(){
				button2.value="按钮二测试";
			}
			//按钮三事件
			var button3 = document.getElementById("button3");
			button3.addEventListener("mouseover",function(){
				button3.style.backgroundColor = "blue";
				button3.style.color = "white";
			});
			button3.addEventListener("click",() => alert("javascript事件测试三"));
		</script>
	</body>
</html>
